<template>
  <div class="tworank-container">
    <div
      class="hotContainer"
      :class="newScrollTop > 445 ? 'active' : ''"
      v-if="isShowNav"
    >
      <ul class="rank">
        <li class="rank-item1">
          <span class="service">- 热销榜 -</span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-shuju"></i>
          <span class="service-intro">
            全站
            <br />
            热销榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-xiyiji"></i>
          <span class="service-intro">
            居家
            <br />
            生活榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-Formal-Coat"></i>
          <span class="service-intro">
            服饰
            <br />
            鞋包榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-icon--"></i>
          <span class="service-intro">
            美食
            <br />
            酒水榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-shumashouji"></i>
          <span class="service-intro">
            数码
            <br />
            家电榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-maojin"></i>
          <span class="service-intro">
            个护
            <br />
            清洁榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-jiaqi"></i>
          <span class="service-intro">
            运动
            <br />
            旅行榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-yingerche"></i>
          <span class="service-intro">
            母婴
            <br />
            亲子榜
          </span>
        </li>
        <li class="rank-item">
          <i class="iconfont icon-gift"></i>
          <span class="service-intro">
            全球
            <br />
            特色榜
          </span>
        </li>
      </ul>
    </div>
    <div class="leftContainer" :class="newScrollTop > 445 ? 'active' : ''">
      <div class="kefu-item">
        <i class="kefu-item-a">
          <img src="../static/2code.png" />
          <p class="a-down-p1">扫码领</p>
          <p class="a-down-p2">APP大红包</p>
          <p class="a-down-p2">新人红包</p>
        </i>
      </div>
      <div class="kefu-item">
        <i class="kefu-item-b">
          <i class="iconfont icon-kefu-ermai"></i>
          <p>在线客服</p>
        </i>
      </div>
      <div class="kefu-item">
        <i class="kefu-item-c">
          <i class="iconfont icon-arrow-up-bold"></i>
          <p>回顶部</p>
        </i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotNav',
  props: ['scrollTop'],
  data() {
    return {
      // newScrollTop: this.scrollTop,
    }
  },
  computed: {
    newScrollTop() {
      return this.scrollTop
    },
    // 是否显示左侧导航栏
    isShowNav() {
      const { path } = this.$route
      // 在详情/购物车/登录页面不显示
      return (
        path !== '/detail' &&
        path !== '/shopcart1' &&
        path !== '/login' &&
        path !== '/search'
      )
    },
  },
}
</script>

<style lang="less" scoped>
.hotContainer {
  top: 445px;
  left: 40px;
  margin-left: 0;
  width: 110px;
  border: 1px solid #e2ded6;
  z-index: 98;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  display: block;
  will-change: transform;
  transform: translateZ(0);
}
.rank-item1 {
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-bottom: 1px solid #e9e6e0;
}
.service {
  font-size: 20px;
  color: #bb3343;
}
.rank-item {
  width: 108px;
  height: 36px;
  padding: 1px 11px 0;
  text-align: left;
  position: relative;
  display: table;
  cursor: pointer;
  border-bottom: 1px solid #e9e6e0;
}
.rank-item .iconfont {
  position: absolute;
  top: 2px;
  left: 18px;
  width: 30px;
  height: 30px;
  font-size: 28px;
  color: #bb3343;
}
.rank-item .service-intro {
  vertical-align: middle;
  display: table-cell;
  line-height: 14px;
  font-size: 12px;
  padding-left: 43px;
}
.rank-item .service-intro:hover {
  color: #bb3343;
}
.leftContainer {
  display: block;
  top: 445px;
  right: 0;
  display: fixed;
  position: absolute;
  z-index: 99;
  bottom: 200px;
}
.kefu-item-a {
  text-decoration: none;
  color: #bb3343;
  text-align: center;
  cursor: pointer;
}
.kefu-item-a .a-down-p1 {
  color: black;
}
.kefu-item-a img {
  height: 70px;
  width: 70px;
}
.kefu-item {
  text-align: center;
  color: #6e706e;
}
.kefu-item .kefu-item-b:hover {
  cursor: pointer;
  color: #cd9c5f;
}
.kefu-item-b .iconfont {
  font-size: 45px;
}
.kefu-item-b p {
  font-size: 15px;
}
.kefu-item .kefu-item-c:hover {
  cursor: pointer;
  color: #cd9c5f;
}
.kefu-item-c .iconfont {
  margin-bottom: 0;
  font-size: 37px;
}
.kefu-item-c p {
  font-size: 15px;
}
.active {
  position: fixed;
  top: 80px;
}
</style>
